<template>
    <!-- 渲染数据————内容展示区 -->
    <div>
        <!-- 考勤组信息展示 -->
        <!-- 同步考勤组  synchronize 同步 -->
        <a-button type="primary" @click="synchronize" style="margin:0px 0px 25px 800px">
            同步考勤组信息到数据库
        </a-button>
        <div class="big">
          <table>
        <tr class="group">
            <td>考勤组ID</td>
            <td>考勤组名称</td>
            <td>提前多少分钟提醒</td>
            <td>延迟多少分钟考勤</td>
            <td>是否开启考勤</td>
            <td>是否在校</td>
            <td>是否开启考勤提醒</td>
            <td>考勤组人员数量</td>
            <td>考勤定时任务id</td>
            <td>是否开启考勤周报</td>
            <td>提醒考勤定时任务id</td>
            <td>考勤定时规则</td>
            <td>提醒规则</td>
            <td>更新时间</td>
            <td>下次考勤时间</td>
          
        </tr>
        <!-- 内容展示 -->
        <tr class="group content1" v-for="(item, index) in allattendancegroup.list" :key="index" :data="allattendancegroup">
        
            <!-- 考勤组id -->
            <td>{{ item.group_id }}</td>
            <!-- 考勤组名称 -->
            <td>{{ item.group_name}}</td>
             <!-- 提前多少分钟提醒 -->
             <td>{{ item.alert_time }}</td>
            <!-- 延迟多少分钟考勤 -->
            <td>{{ item.delay_time }}</td>
            <!-- 是否开启考勤  -->
           <td>
                <a-switch :checked="item.is_robot_attendance" @change="onChange(index)" active-value="1"    inactive-value="0" />
            </td>
            <!-- 是否在校 -->
             <td>
                <a-switch :checked="item.is_in_school" @change="inSchool(index)" active-value="1" inactive-value="0" />
            </td> 
            <!-- 是否开启考勤提醒 -->
            <td>
                <a-switch :checked="item.is_alter_attendance" @change="alter(index)" active-value="1" inactive-value="0" />
            </td> 
            <!-- 考勤组人员数量 -->
            <td>{{ item.member_count }}</td>
            <!-- 考勤定时任务id -->
            <td>{{ item.robot_attend_task_id }}</td>
         <!-- 是否开启考勤周报 -->
         <td>
              <a-switch :checked="item.is_attend_week_paper" @change="onWeekPaper(index)" active-value="1"    inactive-value="0" />
            </td>

            <!-- 提醒考勤定时任务id -->
            <td>{{ item.robot_alter_task_id }}</td>
               <!-- 考勤定时规则 -->
               <td>{{ item.attend_spec}}</td>
            <!-- 提醒规则（提醒大家快快打卡） -->
            <td>{{ item.alert_spec }}</td>
              <!-- 更新时间 -->
              <td>{{ item.UpdatedAt}}</td>
              <!-- 下次考勤时间 -->
             <td>{{ item.next_time }}</td>
        </tr> 
      </table>
      </div>
       <!-- 分页器 -->
    <div v-if="isShowPage" class="bottom">
      <a-pagination v-model="page" :total="allattendancegroup.total" show-less-items @change="sizeChange" />
    </div>
    </div>
</template>
<script>
// 引入接口
import { reqGetAttendanceGroupList, requpdateAttendanceGroup, reqImportAttendanceGroupData } from "@/api"
export default {
    inject: ['reload'],  //注入依赖  所提供的数据不是响应式的 
    data() {
        return {
            loading: false,
            visible: false,
            allattendancegroup: [],  //这里是自己定义的数组用来接收cu数据的
            page: 1,
            isShowPage: true,
            pageSize: 10,
            changegroup:{
              "group_id": 0,
    "is_robot_attendance": true,
    "is_alter_attendance": true,
    "alert_time": 0,
    "delay_time": 0,
    "is_in_school": true,
    "is_attend_week_paper": true
            }
        }
    },
    mounted() {
    this.getDataGroup();
    const token1 = localStorage.getItem("token");
    console.log(token1);
    if (token1 === "undefined") {
      this.isShowPage = false;
      console.log(this.isShowPage);
    }
  },

    methods: {
        getDataGroup() {
            reqGetAttendanceGroupList(this.page, this.pageSize).then((res) => {
                this.allattendancegroup = res.data;
            })
        },
          // 分页
    sizeChange(val) {
      this.page = val;
      reqGetAttendanceGroupList(this.page, this.pageSize).then((res) => {
                this.allattendancegroup = res.data;
            })
   

    },
        // 开关切换
        onChange(index) {
          this.changegroup.group_id=this.allattendancegroup.list[index].group_id;
          this.changegroup.is_robot_attendance=!this.allattendancegroup.list[index].is_robot_attendance;
          this.changegroup.is_alter_attendance=this.allattendancegroup.list[index].is_alter_attendance;
          this.changegroup.alert_time=this.allattendancegroup.list[index].alert_time
          this.changegroup.delay_time=this.allattendancegroup.list[index].delay_time
          this.changegroup.is_in_school=this.allattendancegroup.list[index].is_in_school
          this.changegroup.is_attend_week_paper=this.allattendancegroup.list[index].is_attend_week_paper
console.log(this.changegroup);
            requpdateAttendanceGroup(this.changegroup).then(res => {
              if(res.code==0){
                this.allattendancegroup.list[index].is_robot_attendance = !this.allattendancegroup.list[index].is_robot_attendance
              }
                console.log(res, '是否开启考勤');
                console.log(this.allattendancegroup[index]);
                // this.reload()
            })
        },
        // 是否在校
        inSchool(index) {
          this.changegroup.group_id=this.allattendancegroup.list[index].group_id;
          this.changegroup.is_robot_attendance=this.allattendancegroup.list[index].is_robot_attendance;
          this.changegroup.is_alter_attendance=this.allattendancegroup.list[index].is_alter_attendance;
          this.changegroup.alert_time=this.allattendancegroup.list[index].alert_time
          this.changegroup.delay_time=this.allattendancegroup.list[index].delay_time
          this.changegroup.is_in_school=!this.allattendancegroup.list[index].is_in_school
          this.changegroup.is_attend_week_paper=this.allattendancegroup.list[index].is_attend_week_paper
          requpdateAttendanceGroup(this.changegroup).then(res => {
              if(res.code==0){
                this.allattendancegroup.list[index].is_in_school = !this.allattendancegroup.list[index].is_in_school
}
                // this.reload()
            })
        },
        //是否开启考勤周报
        onWeekPaper(index){
          this.changegroup.group_id=this.allattendancegroup.list[index].group_id;
          this.changegroup.is_robot_attendance=this.allattendancegroup.list[index].is_robot_attendance;
          this.changegroup.is_alter_attendance=this.allattendancegroup.list[index].is_alter_attendance;
          this.changegroup.alert_time=this.allattendancegroup.list[index].alert_time
          this.changegroup.delay_time=this.allattendancegroup.list[index].delay_time
          this.changegroup.is_in_school=this.allattendancegroup.list[index].is_in_school
          this.changegroup.is_attend_week_paper=!this.allattendancegroup.list[index].is_attend_week_paper

            requpdateAttendanceGroup(this.changegroup).then(res => {
              if(res.code==0){
                this.allattendancegroup.list[index].is_attend_week_paper = !this.allattendancegroup.list[index].is_attend_week_paper
              }
                // this.reload()
            })
        },
         //是否开启考勤提醒
        alter(index){
          this.changegroup.group_id=this.allattendancegroup.list[index].group_id;
          this.changegroup.is_robot_attendance=this.allattendancegroup.list[index].is_robot_attendance;
          this.changegroup.is_alter_attendance=!this.allattendancegroup.list[index].is_alter_attendance;
          this.changegroup.alert_time=this.allattendancegroup.list[index].alert_time
          this.changegroup.delay_time=this.allattendancegroup.list[index].delay_time
          this.changegroup.is_in_school=this.allattendancegroup.list[index].is_in_school
          this.changegroup.is_attend_week_paper=!this.allattendancegroup.list[index].is_attend_week_paper

            requpdateAttendanceGroup(this.changegroup).then(res => {
              if(res.code==0){
                this.allattendancegroup.list[index].is_alter_attendance = !this.allattendancegroup.list[index].is_alter_attendance
              }
                // this.reload()
            })
        },
        // 同步考勤组信息到数据库
        synchronize() {
            reqImportAttendanceGroupData().then(res => {
                console.log(res);
            })
            this.getDataGroup()
        }
    }


}

</script>
  
<style scoped >

.big{
width: 100%;
height:600px ;
overflow-x: auto;
}
.group {
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;
    background-color: #eaf4fe;
}

.group td {
    text-align: center;
    white-space: nowrap;
    margin:5px 30px 0px 30px ;
    width: 150px;
}

.content1 {
    text-align: center;
    background-color: #fff;
}

.content1  td {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    margin:5px 30px 0px 30px ;
    width: 150px;
}

.content1:hover {
    background-color: #eaf4fe;
} 
</style>
  

<!-- provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性： -->

